<template>
<div class="WidgetHomeProductMy-detailContainer-3W8nd">
    <h3  class="h3-title">
        <span tooltipicon="help" class="nb-rc-text product-title">
            <span data-v-363f0e87="" class="the-text">快速开始</span>
        </span>
    </h3>
    <ul class="product_list thm-uglier">
        <li>
        <div class="create-item" v-for="(item , index) in 4" :key="index">
            <div>
                <img src="https://gw.alicdn.com/tfs/TB10uW.CNjaK1RjSZFAXXbdLFXa-112-112.png" class="item-image" />
            </div>
            <div class="item-cont">
                <div class="item-title">
                    业务管理应用
                </div>
                <div class="item-desc">
                    业务管理平台和后台快速创建
                </div>
            </div>
        </div>
        </li>
    </ul>
</div>
</template>

<script>
export default {
    methods: {
        openWaring() {
            this.$notify({
                title: '警告',
                message: '这是一条警告的提示消息',
                type: 'warning'
            });
        }
    }
}
</script>

<style scoped lang="scss">

.create-item {
    position: relative;
    cursor: pointer;
    display: inline-flex;
    width: 48%;
    height: 90px;
    border: 0px ;
    border-radius: 8px;
    align-items: center;
    background: #f7f9fa;
    padding: 0 12px;
    margin: 0 8px 20px 0;

    .item-image {
        width: 40px;
        margin-right: 12px;
        border-radius: 50%;
        margin-top: 5px;
    }

    .item-cont {
        flex: 1;
        overflow: hidden;
    }

    .item-title {
        font-size: 14px;
        font-weight: 500;
        color: rgba(0, 0, 0, 0.85);
        font-family: 'PingFangSC-Medium';
        line-height: 2;
    }

    .item-desc {
        font-size: 12px;
        color: rgba(0, 0, 0, 0.56);
    }
}

.el-col {
    border-radius: 2px;
    background: #fff ;
    padding: 20px !important ;
    padding-left: 20px !important ;
    padding-right: 20px !important ;
    border: var(--card-border-width,1px) var(--card-border-style,solid) var(--card-border-color,#e3e4e6);
}

.product_list {
    list-style: none ;
    padding-left: 0px ;
}

.widget-title {
    margin: -16px 0 0;
    font-size: 14px;
    color: #333;
    line-height: 44px;
    font-weight: 400;
}

</style>


